<template>
  <div class="demo-container">
    <!-- v-bind：动态绑定属性 -->
    <img
        :src="dynamicImageUrl"
        alt="动态示例图片"
        class="demo-image"
    >

    <!-- v-model：双向数据绑定 -->
    <input
        v-model="inputValue"
        placeholder="输入内容同步到下方"
        class="input"
    >
    <p>v-model 绑定的值：{{ inputValue }}</p>

    <!-- v-show：切换 display 控制显示隐藏 -->
    <button @click="toggleShow">切换 v-show</button>
    <div
        v-show="isShow"
        class="box show-box"
    >
      v-show 控制的内容（一个超级厉害的person）
    </div>

    <!-- v-if / v-else-if / v-else：条件渲染 -->
    <div class="condition-group">
      <button @click="changeScore(100)">设为 100 分</button>
      <button @click="changeScore(80)">设为 80 分</button>
      <button @click="changeScore(50)">设为 50 分</button>

      <p v-if="score >= 90" class="grade-a">
        成绩评定：A（奖励再学一天）
      </p>
      <p v-else-if="score >= 60" class="grade-b">
        成绩评定：B（奖励周末郊游）
      </p>
      <p v-else class="grade-c">
        成绩评定：C（惩罚一周只玩手机）
      </p>
    </div>

    <!-- v-on：绑定事件 -->
    <div class="event-group">
      <button @click="count++" class="counter-btn">
        v-on 点击 +1
      </button>
      <button @click="decrement" class="counter-btn">
        v-on 点击 -1
      </button>
      <p>计数：{{ count }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

// 响应式数据
const dynamicImageUrl = ref('https://picsum.photos/200/200') // 使用有效示例图
const inputValue = ref('')
const isShow = ref(true)
const score = ref(95)
const count = ref(0)

// 生命周期钩子
onMounted(() => {
  // 3秒后切换图片
  setTimeout(() => {
    dynamicImageUrl.value = 'https://picsum.photos/200/201'
  }, 1000)
})

// 方法
function toggleShow() {
  isShow.value = !isShow.value
}

function changeScore(newScore: number) {
  score.value = newScore
}

function decrement() {
  count.value--
}
</script>

<style scoped>
.demo-container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.demo-image {
  max-width: 100%;
  height: auto;
  margin-bottom: 20px;
  border-radius: 4px;
}

.input {
  width: 100%;
  padding: 8px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.box {
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #eee;
  border-radius: 4px;
}

.show-box {
  background: #f9f9f9;
  transition: opacity 0.3s;
}

.condition-group, .event-group {
  margin-top: 20px;
}

button {
  margin: 5px;
  padding: 8px 16px;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  background-color: #42b983;
  color: white;
  transition: background-color 0.2s;
}

button:hover {
  background-color: #35495e;
}

.counter-btn {
  background-color: #647eff;
}

.counter-btn:hover {
  background-color: #4d66cc;
}

.grade-a { color: green; }
.grade-b { color: orange; }
.grade-c { color: red; }
</style>